import React, { useState, useEffect, useRef, useContext } from 'react';
import { Form, Input, Button, Space, message } from 'antd';

import styles from './style.module.scss';

import image1 from './image_1.png';
import image2 from './image_2.png';
import image3 from './image_3.png';

export default function Messages(props) {
    let { roomId, message = [] ,uuid:from} = props; // 房间信息及消息, 是否正在当前窗口, 用户信息
    const oUl = useRef();
    // const [length, setLength] = useState(message.length)

    // useEffect(() => {
    //     if (active) {
    //         // console.log(oUl.current.scrollHeight, oUl.current.scrollTop, oUl)
    //         // console.log(oUl.current.scrollTo(0, oUl.current.scrollTop))
    //         console.log('测试', length)
    //         setTimeout(() => {
    //             console.log(oUl,oUl.current.offsetHeight)
    //             oUl.current.scrollTo(100, oUl.current.offsetHeight)
    //         }, 0)
    //     }
    // }, [length])
    return (
        <ul className={styles.record} ref={oUl}>
            {
                message.map((item, index) => {
                    return (
                        <li className={item.from == from ? styles.self : ''} key={roomId + '' + index}>
                            <div className={styles.avatar}><img src={image1} /></div>
                            <div className={styles.content}>
                                <div className={styles.username}>{item.nickname}</div>
                                <p>{item.content}</p>
                            </div>
                        </li>
                    )
                })
            }
        </ul>
    )
}